<!-- 弹出层对话框 -->
<template>
  <view>
    <aster-popup
      :show="props.show"
      :bgColor="props.bgColor"
      mode="center"
      round="20rpx"
      @close="cancel()"
    >
      <view class="popup">
        <view class="popup__title">
          {{ props.title }}
        </view>
        <view class="popup__content">
          <input
            class="uni-input"
            v-model="content"
            :value="props.content"
            :maxlength="props.maxlength"
            placeholder="请输入..."
          />
          <view v-if="!isEmpty(props.tip)" class="tip">{{ tip }}</view>
        </view>
        <view class="popup__btn both" v-if="props.btnType == 'both'">
          <button @click="cancel()" class="cancel" :style="props.cancelStyle">
            {{ props.cancelText }}
          </button>
          <button @click="confirm()" :style="props.confirmStyle">{{ props.confirmText }}</button>
        </view>
        <view class="popup__btn center" v-if="props.btnType == 'center'">
          <button @click="confirm()" :style="props.confirmStyle">{{ props.confirmText }}</button>
        </view>
      </view>
    </aster-popup>
  </view>
</template>
<script setup lang="ts">
  import { isEmpty } from '@/utils/is';
  import AsterPopup from '@/components/common/aster-popup.vue';
  import { ref } from 'vue';

  const props = defineProps({
    show: {
      type: Boolean,
      default: () => false,
    },
    // 标题
    title: {
      type: String,
      default: () => '',
    },
    // 内容
    content: {
      type: String,
      default: () => '',
    },
    // 提示
    tip: {
      type: String,
      default: () => '',
    },
    // 输入长度
    maxlength: {
      type: Number,
      default: () => 50,
    },
    // 背景色
    bgColor: {
      type: String,
      default: () => '#fff',
    },
    // 按钮方式，both, center
    btnType: {
      type: String,
      default: () => 'both',
    },
    // 取消
    cancelText: {
      type: String,
      default: () => '取消',
    },
    // 取消样式
    cancelStyle: {
      type: Object,
      default: () => {},
    },
    // 确定
    confirmText: {
      type: String,
      default: () => '确定',
    },
    // 确定样式
    confirmStyle: {
      type: Object,
      default: () => {},
    },
  });

  const emits = defineEmits(['cancel', 'confirm']);

  const content = ref(props.content);

  const cancel = () => {
    emits('cancel');
  };

  const confirm = () => {
    emits('confirm', content);
  };
</script>
<style lang="scss" scoped>
  .popup {
    width: 600rpx;

    &__title {
      display: flex;
      flex-direction: row;
      justify-content: center;
      padding-top: 50rpx;
    }

    &__content {
      padding: 20rpx;

      input {
        width: 100%;
        padding: 20rpx;
        background-color: #f5f5f5;
      }

      .tip {
        color: #bbb;
        font-size: 24rpx;
        padding: 4rpx 20rpx;
      }
    }

    &__btn {
      display: flex;
      flex-direction: row;
      border-top-color: #f5f5f5;
      border-top-style: solid;
      border-top-width: 1px;
      padding-top: 20rpx;

      .both {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .center {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .cancel {
        width: 100%;
        background-color: #f5f5f5;
        color: #333;
      }

      button {
        width: 100%;
        background-color: #ff6a6c;
        color: #fff;
        margin: 10rpx;
        font-size: 32rpx;
      }
    }
  }
</style>
